<template  >
  <div class="all">
    <!-- 页头 -->
    <el-container class="allContainer">
      <el-header class="head">
        <div class="divHead"></div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div>
                <div class="topFont">客户信息管理</div>
              </div>
            </div>
          </el-col>
          <!-- --------------------------------新增--------------------------- -->
          <!-- --------------------------------新增--------------------------- -->
          <div class="divBtn">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="customerAdd = true"
              >新增
            </el-button>
            <el-dialog
              title="客户信息新增"
              :visible.sync="customerAdd"
              @close="closeDialogAddgsVisible"
            >
              <div class="dialogAll">
                <div class="left">
                  <div class="rightFont">客户基本信息：</div>
                  <div class="rightForm">
                    <div class="customerForm">
                      <el-form
                        :model="customerForm"
                        label-width="100px"
                        size="mini"
                      >
                        <el-form-item
                          label="跟进人"
                          :required="true"
                          style="width: 280px; padding-top: 20px"
                        >
                          <el-input
                            v-model="customerForm.empName"
                            @blur="queryEmpName"
                            placeholder="请输入跟进人"
                            :clearable="true"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="跟进人电话"
                          :required="true"
                          style="width: 280px"
                        >
                          <el-input
                            v-model="customerForm.empTel"
                            placeholder="请输入跟进人联系方式"
                            :clearable="true"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="客户名称"
                          :required="true"
                          style="width: 280px"
                        >
                          <el-input
                            v-model="customerForm.customerName"
                            placeholder="请输入客户名称"
                            :clearable="true"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="客户电话"
                          :required="true"
                          style="width: 280px"
                        >
                          <el-input
                            v-model="customerForm.customerPhone"
                            placeholder="请输入联系方式"
                            :clearable="true"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="客户等级"
                          :required="true"
                          style="width: 280px"
                        >
                          <el-select
                            size="mini"
                            v-model="customerForm.customerType"
                            placeholder="请选择客户等级"
                          >
                            <el-option
                              v-for="item in customerTypes"
                              :key="item.id"
                              :label="item.carTypeName"
                              :value="item.carTypeName"
                              :clearable="true"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="跟进状态"
                          :required="true"
                          style="width: 280px"
                        >
                          <el-select
                            size="mini"
                            v-model="customerForm.followState"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in followStates"
                              :key="item.id"
                              :label="item.followState"
                              :value="item.id"
                              :clearable="true"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="leftFont">客户需求信息：</div>
                  <div class="leftForm">
                    <div class="customerForm">
                      <el-form
                        ref="customerForm"
                        label-width="80px"
                        size="mini"
                      >
                        <div class="demo-input-size">
                          <el-form-item
                            label="需求面积"
                            :required="true"
                            style="
                              width: 280px;
                              padding-top: 20px;
                              padding-left: 20px;
                            "
                          >
                            <el-input
                              size="medium"
                              placeholder="请输入最小面积"
                              suffix-icon="el-icon-date"
                              v-model="customerForm.needsMinarea"
                              :clearable="true"
                            >
                            </el-input
                            >&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;

                            <el-input
                              size="medium"
                              placeholder="请输入最大面积"
                              suffix-icon="el-icon-date"
                              v-model="customerForm.needsMaxarea"
                              :clearable="true"
                            >
                            </el-input>
                          </el-form-item>
                        </div>
                        <el-form-item
                          label="预算价格"
                          :required="true"
                          style="width: 280px; padding-left: 20px; border: 1px"
                        >
                          <el-input
                            size="medium"
                            placeholder="请输入最小预算"
                            suffix-icon="el-icon-date"
                            v-model="customerForm.needsMinprice"
                            :clearable="true"
                          >
                          </el-input
                          >&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;

                          <el-input
                            size="medium"
                            placeholder="请输入最大预算"
                            suffix-icon="el-icon-date"
                            v-model="customerForm.needsMaxprice"
                            :clearable="true"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="租户用途"
                          :required="true"
                          style="width: 280px; padding-left: 20px"
                        >
                          <el-input
                            size="medium"
                            placeholder="请输入租户用途"
                            suffix-icon="el-icon-date"
                            v-model="customerForm.needsUse"
                            :clearable="true"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="意向房源"
                          :required="true"
                          style="width: 280px; padding-left: 20px"
                        >
                          <el-input
                            size="medium"
                            placeholder="请输入意向房源"
                            suffix-icon="el-icon-date"
                            v-model="customerForm.needsHoperoom"
                            :clearable="true"
                          >
                          </el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>
              <div slot="footer" style="text-align: center">
                <el-button @click="customerAdd = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
              </div>
            </el-dialog>
            <el-popconfirm title="确定删除吗？" @confirm="delByIds">
              <el-button
                slot="reference"
                size="mini"
                type="warning"
                icon="el-icon-delete"
                >批量删除
              </el-button>
            </el-popconfirm>
          </div>
        </el-row>
      </el-header>
      <el-main class="bottomMain">
        <div class="divMain">
          <template>
            <!------------------------------------ 模糊查询 ------------------------------------>
            <!------------------------------------ 模糊查询 ------------------------------------>
            <div class="mainTop">
              <div class="divInputAll">
                <!------------------------------ 输入框 ------------------------------------------>
                <!------------------------------ 输入框 ------------------------------------------>
                <div class="divInput">
                  <div class="inputFont">客户名称：</div>
                  <div style="float: left">
                    <el-input
                      size="mini"
                      placeholder="请输入客户名称"
                      v-model="queryCustomer.customerName"
                      :clearable="true"
                    >
                    </el-input>
                  </div>
                </div>
                <div class="divSelect">
                  <div class="inputFont">意向等级：</div>
                  <div style="float: left">
                    <el-select
                      size="mini"
                      v-model="queryCustomer.customerDengji"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in customerDengjis"
                        :key="item.id"
                        :label="item.customerDengji"
                        :value="item.customerDengji"
                        :clearable="true"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="divSelect">
                  <div class="inputFont">客户等级：</div>
                  <div style="float: left">
                    <el-select
                      size="mini"
                      v-model="queryCustomer.customerType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in customerTypes"
                        :key="item.id"
                        :label="item.carTypeName"
                        :value="item.carTypeName"
                        :clearable="true"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <!---------------------------- 查询重置按钮-------------------------- -->
                <!---------------------------- 查询重置按钮-------------------------- -->
                <div class="likeBtn">
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-search"
                    @click="loadCustomers"
                  >
                    查询</el-button
                  >
                  <el-button size="mini" @click="allCustomers" plain
                    >重置</el-button
                  >
                </div>
                <div class="divSelect1">
                  <div class="inputFont">跟进状态：</div>
                  <div style="float: left">
                    <el-select
                      size="mini"
                      v-model="queryCustomer.followState"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in followStates"
                        :key="item.id"
                        :label="item.followState"
                        :value="item.id"
                        :clearable="true"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-------------------------------- 查所有 -------------------------->
          <!-------------------------------- 查所有 -------------------------->
          <div class="divSelAll">
            <template>
              <el-table
                :data="customerList"
                border
                style="width: 100%; font-size: xx-small; margin: auto"
                @selection-change="handleSelectionChange"
                :row-style="{ height: '22px' }"
                :cell-style="{ padding: '1px' }"
              >
                <el-table-column
                  fixed
                  type="selection"
                  prop="customerId"
                  width="46"
                >
                </el-table-column>
                <el-table-column
                  fixed
                  prop="customerName"
                  label="客户名称"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="customerDengji"
                  label="意向等级"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="customerType"
                  label="客户等级"
                  width="80"
                >
                </el-table-column>
                <el-table-column label="跟进状态" width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.row.followState == 1">成交</span>
                    <span v-if="scope.row.followState == 2">意向</span>
                    <span v-if="scope.row.followState == 3">流失</span>
                  </template>
                </el-table-column>
                <el-table-column prop="empName" label="跟进人" width="100">
                </el-table-column>
                <el-table-column prop="followBy1" label="新增时间" width="200">
                </el-table-column>
                <el-table-column
                  prop="followDatetime"
                  label="最近跟进时间"
                  width="200"
                >
                </el-table-column>

                <el-table-column label="操作" width="295">
                  <template slot-scope="scope">
                    <!-- --------------------------------详情--------------------------- -->
                    <!-- --------------------------------详情--------------------------- -->
                    <el-button
                      @click="handleClick(scope.row.customerId)"
                      type="text"
                      size="small"
                    >
                      详情
                    </el-button>
                    <el-dialog
                      title="客户信息详情"
                      :append-to-body="true"
                      :visible.sync="customerMesg"
                      @close="closeDialogAddgsVisible"
                    >
                      <div class="dialogAll">
                        <div class="left">
                          <div class="rightFont">客户基本信息：</div>
                          <div class="rightForm">
                            <div class="customerForm">
                              <el-form
                                :model="customerForm"
                                label-width="100px"
                                size="mini"
                              >
                                <el-form-item
                                  label="跟进人"
                                  :required="true"
                                  style="width: 280px; padding-top: 20px"
                                >
                                  <el-input
                                    v-model="customerForm.empName"
                                    placeholder="请输入跟进人"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                                <el-form-item
                                  label="跟进人电话"
                                  :required="true"
                                  style="width: 280px"
                                >
                                  <el-input
                                    v-model="customerForm.empTel"
                                    placeholder="请输入跟进人联系方式"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                                <el-form-item
                                  label="客户名称"
                                  :required="true"
                                  style="width: 280px"
                                >
                                  <el-input
                                    v-model="customerForm.customerName"
                                    placeholder="请输入客户名称"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                                <el-form-item
                                  label="客户电话"
                                  :required="true"
                                  style="width: 280px"
                                >
                                  <el-input
                                    v-model="customerForm.customerPhone"
                                    placeholder="请输入联系方式"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                                <el-form-item
                                  label="客户等级"
                                  :required="true"
                                  style="width: 280px"
                                >
                                  <el-select
                                    size="mini"
                                    v-model="customerForm.customerType"
                                    placeholder="请选择客户等级"
                                  >
                                    <el-option
                                      v-for="item in customerTypes"
                                      :key="item.id"
                                      :label="item.carTypeName"
                                      :value="item.carTypeName"
                                      :clearable="true"
                                    >
                                    </el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item
                                  label="跟进状态"
                                  :required="true"
                                  style="width: 280px"
                                >
                                  <el-select
                                    size="mini"
                                    v-model="customerForm.followState"
                                    placeholder="请选择跟进状态"
                                  >
                                    <el-option
                                      v-for="item in followStates"
                                      :key="item.id"
                                      :label="item.followState"
                                      :value="item.id"
                                      :clearable="true"
                                    >
                                    </el-option>
                                  </el-select>
                                </el-form-item>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="right">
                          <div class="leftFont">客户需求信息：</div>
                          <div class="leftForm">
                            <div class="customerForm">
                              <el-form
                                ref="customerForm"
                                label-width="80px"
                                size="mini"
                              >
                                <div class="demo-input-size">
                                  <el-form-item
                                    label="需求面积"
                                    :required="true"
                                    style="
                                      width: 280px;
                                      padding-top: 20px;
                                      padding-left: 20px;
                                    "
                                  >
                                    <el-input
                                      size="medium"
                                      placeholder="请输入最小面积"
                                      suffix-icon="el-icon-date"
                                      v-model="customerForm.needsMinarea"
                                      :clearable="true"
                                    >
                                    </el-input>
                                    &nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;

                                    <el-input
                                      size="medium"
                                      placeholder="请输入最大面积"
                                      suffix-icon="el-icon-date"
                                      v-model="customerForm.needsMaxarea"
                                      :clearable="true"
                                    >
                                    </el-input>
                                  </el-form-item>
                                </div>
                                <el-form-item
                                  label="预算价格"
                                  :required="true"
                                  style="
                                    width: 280px;
                                    padding-left: 20px;
                                    border: 1px;
                                  "
                                >
                                  <el-input
                                    size="medium"
                                    placeholder="请输入最小预算"
                                    suffix-icon="el-icon-date"
                                    v-model="customerForm.needsMinprice"
                                    :clearable="true"
                                  >
                                  </el-input
                                  >&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;

                                  <el-input
                                    size="medium"
                                    placeholder="请输入最大预算"
                                    suffix-icon="el-icon-date"
                                    v-model="customerForm.needsMaxprice"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                                <el-form-item
                                  label="租户用途"
                                  :required="true"
                                  style="width: 280px; padding-left: 20px"
                                >
                                  <el-input
                                    size="medium"
                                    placeholder="请输入租户用途"
                                    suffix-icon="el-icon-date"
                                    v-model="customerForm.needsUse"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                                <el-form-item
                                  label="意向房源"
                                  :required="true"
                                  style="width: 280px; padding-left: 20px"
                                >
                                  <el-input
                                    size="medium"
                                    placeholder="请输入意向房源"
                                    suffix-icon="el-icon-date"
                                    v-model="customerForm.needsHoperoom"
                                    :clearable="true"
                                  >
                                  </el-input>
                                </el-form-item>
                              </el-form>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div slot="footer" style="text-align: center">
                        <el-button type="primary" @click="updateById"
                          >修改</el-button
                        >
                        <el-button @click="toFollow()">跟进记录</el-button>
                        <el-button @click="customerMesg = false"
                          >取消</el-button
                        >
                      </div>
                    </el-dialog>
                    <el-popconfirm
                      title="确定删除吗？"
                      @confirm="delByid(scope.row.customerId)"
                    >
                      <el-button slot="reference" type="text" size="mini"
                        >删除</el-button
                      >
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <div class="divPage">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryCustomer.currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="queryCustomer.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      customerList: [],
      customerTypes: [
        { id: 1, carTypeName: "一级" },
        { id: 2, carTypeName: "二级" },
        { id: 3, carTypeName: "三级" },
      ],
      customerDengjis: [
        { id: 1, customerDengji: "高" },
        { id: 2, customerDengji: "中" },
        { id: 3, customerDengji: "低" },
      ],
      followStates: [
        { id: 1, followState: "成交" },
        { id: 2, followState: "意向" },
        { id: 3, followState: "流失" },
      ],
      customerAdd: false,
      customerMesg: false,
      customerForm: {},
      page: {
        total: 0, //总条数
      },
      queryCustomer: {
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
        customerName: "",
        customerDengji: "",
        customerType: "",
        followState: "",
      },
    };
  },
  methods: {
    loadCustomers() {
      this.$axios.post("customers", this.queryCustomer).then((res) => {
        this.customerList = res.data.data.customerList.list;
        this.page.total = res.data.data.customerList.total;
      });
    },
    // 重置按钮
    allCustomers() {
      this.queryCustomer = {
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
        customerName: "",
        customerDengji: "",
        customerType: "",
        followState: "",
      };
      this.loadCustomers();
    },
    // 根据员工姓名查电话
    queryEmpName() {
      this.$axios.post("customers/" + this.customerForm.empName).then((res) => {
        if (res.data.code == 200) {
          this.customerForm = res.data.data.sysAdmin;
        } else {
          this.$message.error("出错了！请稍后重试");
        }
      });
    },
    add() {
      this.$axios.post("customers/add", this.customerForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.customerAdd = false;
          this.loadCustomers();
          this.closeDialogAddgsVisible();
        } else {
          this.$message.error("出错了！请稍后重试");
        }
      });
    },
    // 详情按钮事件，根据客户id查找客户相关信息
    handleClick(id) {
      this.$axios
        .get("customers/" + id)
        .then((res) => {
          if (res.data.code == 200) {
            this.customerMesg = true;
            this.customerForm = res.data.data.customerVO;
            Cookies.set("customerId", id);
          } else {
            this.$message.error("出错了！请稍后重试");
          }
        })
        .catch((error) => {
          this.$message.error("系统异常！请稍后重试");
        });
    },
    //修改按钮
    updateById() {
      this.$axios
        .put("customers/", this.customerForm)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.customerMesg = false;
            this.loadCustomers();
            this.closeDialogAddgsVisible();
          } else {
            this.$message.error("出错了！请稍后重试");
          }
        })
        .catch((error) => {
          this.$message.error("系统异常！请稍后重试");
        });
    },
    //获得所有选中对象的id
    handleSelectionChange(val) {
      // console.log(val)
      this.listId = val;
    },
    //批量删除事件
    delByIds() {
      // 声明空数组,这里的数组是后端需要的数据
      const customerIds = new Set();
      //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
      for (let i = 0; i < this.listId.length; i++) {
        customerIds.add(this.listId[i].customerId); //把取出的对象push到数组里
      }
      this.$axios
        .post("customers/delAll", customerIds)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.loadCustomers();
          } else {
            this.$message.error("系统异常！请稍后重试");
          }
        })
        .catch((error) => {
          this.$message.error("系统异常！请稍后重试");
        });
    },
    //根据id删除客户信息
    delByid(id) {
      this.$axios
        .delete("customers/" + id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.loadCustomers();
          } else {
            this.$message.error("系统异常！请稍后重试");
          }
        })
        .catch((error) => {
          this.$message.error("系统异常！请稍后重试,请稍后重试");
        });
    },
    //转跳跟踪记录表数据
    toFollow() {
      this.$router.push({
        path: "/Follow",
        query: {
          customerId: this.customerForm.customerId,
        },
      });
    },

    //每一页显示的条数变化时，每页五条/每页十条
    handleSizeChange(val) {
      this.queryCustomer.pageSize = val;
      this.loadCustomers();
    },
    //当前页数变化时,上一页/下一页
    handleCurrentChange(val) {
      this.queryCustomer.currentPage = val;
      this.loadCustomers();
    },

    /**
     *关闭或取消模态框，清空asdsadad值
     */
    closeDialogAddgsVisible() {
      this.customerForm = {
        //初始化from中的值
      };
    },
  },
  mounted() {
    this.loadCustomers();
  },
};
</script>
<style  scoped>
.all {
  width: 100%;
  height: 700px;
  font-size: 30px;
  background-color: rgb(240, 242, 245);
}

.allContainer {
  width: 98%;
  margin: auto;
}

.head {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divHead {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}

.topFont {
  float: left;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 900;
}

.divBtn {
  float: right;
  margin-right: 10px;
}

.bottomMain {
  border-radius: 8px;
  width: 100%;
  height: 620px;
  margin: auto;
  margin-top: 5px;
}

.divMain {
  width: 100%;
  height: 100%;
}

.mainTop {
  width: 100%;
  height: 110px;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}

.divInputAll {
  border: 0px solid red;
  background-color: white;
  width: 100%;
  height: 100px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divInput {
  border: 0px solid red;
  width: 24.9%;
  height: 50%;
  line-height: 60px;
  margin-left: 20px;
  float: left;
}

.divSelect {
  border: 0px solid red;
  width: 24.9%;
  height: 50%;
  line-height: 60px;
  margin-left: 20px;
  float: left;
}

.divSelect1 {
  border: 0px solid red;
  width: 24.9%;
  height: 50%;
  line-height: 40px;
  margin-left: 20px;
  float: left;
}

.likeBtn {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}

.inputFont {
  float: left;
  font-size: 2px;
  padding-top: 5px;
}

.optionFont {
  float: right;
  color: #8492a6;
  font-size: xx-small;
}

.divSelAll {
  width: 100%;
  height: 75%;
  margin-top: 8px;
  line-height: 20px;
}

.divPage {
  width: 100%;
  height: 2%;
  margin-top: 20px;
  line-height: 10px;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 54%;
  left: 57.5%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 1135px;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.dialogAll {
  border: 0px solid red;
  width: 98%;
  height: 105%;
  margin: auto;
  margin-top: -30px;
}

.left {
  border: 0px solid red;
  width: 48%;
  height: 100%;
  float: left;
}

.right {
  border: 0px solid red;
  width: 50%;
  height: 100%;
  float: right;
}

.leftFont,
.rightFont {
  border: 0px solid red;
  width: 90%;
  height: 5%;
  line-height: 20px;
  text-align: left;
  font-weight: 500;
  font-family: "微软楷体";
  margin-left: 10px;
}

.leftForm,
.rightForm {
  border: 2px dashed #8492a6;
  border-radius: 10px;
  width: 99%;
  height: 94%;
  padding-top: 10px;
}

.visitorForm,
.carForm {
  border: 0px solid red;
  width: 90%;
  height: 95%;
  margin: auto;
  margin-top: 30px;
  margin-left: 35px;
}
</style>
